import { Map, Arc } from 'react-bmapgl';
import { useEffect, useRef, useState } from 'react';
import '@/assets/css/life.css';
 
const Life = () => {
  const mapRef = useRef(null);
  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
 
  // 容器尺寸检测 + 地图重绘
  useEffect(() => {
    const updateSize = () => {
      const container = document.querySelector('.map-container');
      if (container) {
        const newSize = {
          width: container.offsetWidth,
          height: container.offsetHeight
        };
        setContainerSize(newSize);
      }
    };
 
    window.addEventListener('resize', updateSize);
    updateSize(); // 初始化检测
    return () => window.removeEventListener('resize', updateSize);
  }, []);
 
/*   // 地图实例操作
  useEffect(() => {
    if (mapRef.current?.map) {
      // 强制重绘地图
      mapRef.current.map.reset();
      // 延迟适配确保尺寸准确
      setTimeout(() => {
        mapRef.current.map.resize();
        mapRef.current.map.setViewport({
          center: new window.BMapGL.Point(108.404, 34.915),
          zoom: 4
        });
      }, 100);
    }
  }, [containerSize]); */
 
  return (
    <section id="life" className="life-section">
    <div className="map-container">
      <Map
        ref={mapRef}
        center={new window.BMapGL.Point(108.404, 34.915)}
        style={{ width: '100%', height: '100%' }}
        zoom={10}
        enableScrollWheelZoom
        viewportFitView
        enableAutoResize
        defaultOptions={{
          enableMapClick: false,
        }}
        displayOptions={{
          building: false,
        }}
      >
        <Arc
          autoViewport
          showStartPoint
          showEndPoint
          enableAnimation
          pointOptions={{
            size: 10,
            color: 'rgba(250, 50, 20, 0.7)',
            shape: 'square',
          }}
          textOptions={{
            fontFamily: 'Kaiti SC',
            color: '#f00',
            offset: [0, 10],
          }}
          animationOptions={{
            width: 2,
            color: () => 'rgba(18, 17, 17, 0.7)',
            interval: 0.1,
          }}
          data={[
            {
              color:  'rgba(255, 0, 0, 0.7)',
              from: {
                city: '衡阳'
              },
              to: {
                 point: {
                  lng: 113.33,
                  lat: 28.15
                } 
              /*  city:"长沙" */
              }
            },
            {
              color:  'rgba(255, 0, 0, 0.7)',
              from: {
                city: '衡阳'
              },
              to: {
                city: '北京'
              }
            },
            {
              color:  'rgba(255, 255, 0, 0.7)',
              from: {
                city: '衡阳'
              },
              to: {
                city: '南京'
              }
            },
            {
              color: 'rgba(0, 255, 0, 0.7)',
              from: {
                city: '南京'
              },
              to: {
                city: '绍兴'
              }
            },
            {
              color: 'rgba(0, 255, 0, 0.7)',
              from: {
                city: '南京'
              },
              to: {
                city: '北京'
              }
            },
            {
              color: 'rgba(0, 255, 0, 0.7)',
              from: {
                city: '南京'
              },
              to: {
                city: '香港'
              }
            }
          ]}
        />
      </Map>
    </div>
    </section>
  );
};
 
export default Life;

